/*
 * @Author: xiaosihan 
 * @Date: 2021-07-18 16:49:46 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 13:10:40
 */

import * as THREE from "three";
import { BufferGeometry, Camera, Material, Scene, WebGLRenderer } from "three";
import { Group3D, Line2, Mesh, Text3D, Transition } from "xsh-react-three";
import { Object3D } from "xsh-react-three";

const ballGeo = new THREE.SphereBufferGeometry(0.5, 50, 50);

interface Props {
}

interface State {
    lookAtPosition: [number, number, number]
}

export default class Matrix4Mesh extends Group3D<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    centerPosition = new THREE.Vector3(0, 0, 0);

    lookAtPosition = new THREE.Vector3(0, 0, 0);

    up = new THREE.Vector3(0, 1, 0);

    TlookAtPosition = new Transition({ x: 0, y: 0, z: -5 });

    matrix4 = new THREE.Matrix4();

    matrix4rotation = new THREE.Euler();

    state: State = {
        lookAtPosition: [0, 0, -5]
    }

    beforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera) {
        let timetemp = performance.now() / 1000;

        this.lookAtPosition.set(Math.sin(timetemp), 0, Math.cos(timetemp));

        this.matrix4.lookAt(
            this.centerPosition,
            this.lookAtPosition,
            this.up
        );
    }

    componentDidMount() {
    }

    componentDidUpdate() {
        const [x, y, z] = this.state.lookAtPosition;
        this.TlookAtPosition.set({ x, y, z });
    }

    render() {

        const [x, y, z] = this.state.lookAtPosition;

        return (
            <Group3D
                position={{ x: 15 }}
            >
                <Group3D
                    rotation={(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, object3d: Object3D) => {
                        return this.matrix4rotation.setFromRotationMatrix(this.matrix4);
                    }}
                >

                    {/* 单位矩阵的中心位置 */}
                    <Group3D
                        lookAt="camera"
                    >
                        <Mesh
                            geometry={ballGeo}
                            color="#888"
                            side={THREE.BackSide}
                        />

                        <Text3D
                            text="P"
                            color="#fff"
                            textAlign="center_center"
                            size={0.5}

                            curveSegments={4}
                            height={0.1} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.01} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                        <Text3D
                            text="P"
                            color="#000"
                            textAlign="center_center"
                            size={0.5}

                            curveSegments={4}
                            height={0.09} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.03} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                    </Group3D>

                    {/* 单位矩阵的x向量 */}
                    <Group3D
                        position={{ x: 3 }}
                    >
                        <Mesh
                            geometry={ballGeo}
                            color="#f00"
                            side={THREE.BackSide}
                        />

                        <Line2
                            points={[[-0.5, 0, 0], [-2.5, 0, 0]]}
                            color={["#f00"]}
                            linewidth={10}
                        />

                        <Text3D
                            text="X"
                            color="#fff"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"

                            curveSegments={4}
                            height={0.1} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.01} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                        <Text3D
                            text="X"
                            color="#000"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"

                            curveSegments={4}
                            height={0.09} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.03} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                    </Group3D>

                    {/* 单位矩阵的y向量 */}
                    <Group3D
                        position={{ y: 3 }}
                    >
                        <Mesh
                            geometry={ballGeo}
                            color="#0f0"
                            side={THREE.BackSide}
                        />

                        <Line2
                            points={[[0, -0.5, 0], [0, -2.5, 0]]}
                            color={["#0f0"]}
                            linewidth={10}
                        />

                        <Text3D
                            text="Y"
                            color="#fff"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"

                            curveSegments={4}
                            height={0.1} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.01} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                        <Text3D
                            text="Y"
                            color="#000"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"

                            curveSegments={4}
                            height={0.09} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.03} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                    </Group3D>

                    {/* 单位矩阵的z向量 */}
                    <Group3D
                        position={{ z: 3 }}
                    >
                        <Mesh
                            geometry={ballGeo}
                            color="#00f"
                            side={THREE.BackSide}
                        />

                        <Line2
                            points={[[0, 0, -0.5], [0, 0, -2.5]]}
                            color={["#00f"]}
                            linewidth={10}
                        />

                        <Text3D
                            text="Z"
                            color="#fff"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"


                            curveSegments={4}
                            height={0.1} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.01} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                        <Text3D
                            text="Z"
                            color="#000"
                            textAlign="center_center"
                            size={0.5}
                            lookAt="camera"

                            curveSegments={4}
                            height={0.09} // 文字的厚度
                            bevelThickness={0.01} // 斜角厚度
                            bevelSize={0.03} // 斜角大小
                            bevelOffset={0}// 斜角偏移
                            bevelSegments={1}//斜角分段
                        />
                    </Group3D>

                </Group3D>

                <Mesh
                    position={(renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, object3d: Object3D) => {
                        return this.lookAtPosition;
                    }}
                    geometry={ballGeo}
                    material="MeshNormalMaterial"
                />

            </Group3D>
        );
    }
}